<script setup lang="ts">
import { ref, onMounted } from "vue";
import { findAllVideo, findVideoByTitle } from "@/api/video/search";
import router from "@/router";
import { useRoute } from "vue-router";
const route = useRoute();
const videos = ref([]);
const tabPosition = ref("综合排序");
const currentTabType = ref("0");
const pageSize = ref(8);
const pageNum = ref(1);
const totalVideoCount = ref(0);
const tabs = [
  {
    label: "按标题查找",
    type: "0",
  },
  {
    label: "按视频id查找",
    type: "1",
  },
  {
    label: "按up主id查找",
    type: "2",
  },
  {
    label: "按up主姓名查找",
    type: "3",
  },
  {
    label: "按视频分类查找",
    type: "4",
  },
];
const searchVideos = async () => {
  let pageNum1 = pageNum.value;
  let pageSize1 = pageSize.value;
  let type = currentTabType.value;
  let title = route.query.searchTxt;
  if (title == null) {
    title = route.query.searchCategory;
    if (title != null) {
      type = "4";
    }
  }
  console.log(title);
  await findVideoByTitle(pageNum1, pageSize1, title, type).then((response) => {
    videos.value = response.list;
    totalVideoCount.value = response.total;
  });
};
const handleTabClick = async (type: string) => {
  currentTabType.value = type;
  tabs.forEach((item) => {
    if (item.type === type) {
      tabPosition.value = item.label;
    }
  });
  await searchVideos();
};
//跳转详情页
const jumpToVideoDetail = (id: number) => {};
const formatCreateDate = (dateString) => {
  if (dateString == null) {
    return "-";
  }
  // 使用正则表达式匹配年、月、日、时、分、秒
  const match = dateString.match(
    /(\w{3}) (\w{3}) (\d{2}) (\d{2}):(\d{2}):(\d{2}) (\w{3}) (\d{4})/
  );
  if (!match) {
    // 如果没有匹配到，返回占位符
    return "-";
  }
  // 提取月、日和年（虽然在这个例子中我们不需要年）
  const month = match[2];
  const day = match[3];
  // 注意：这里我们没有直接使用年、月、日来创建一个新的Date对象
  // 因为我们只需要月和日的字符串表示
  // 但如果你需要一个Date对象，你可以这样做：
  // const date = new Date(match[8], monthsIndex[match[2].toLowerCase()], parseInt(match[3], 10));
  // 其中monthsIndex是一个包含月份索引的对象或数组（因为月份在Date构造函数中是0-11）

  // 直接返回月-日的字符串
  return `${month.slice(0, 3)}-${day.padStart(2, "0")}`; // 假设月份缩写总是3个字符长
};
onMounted(() => {
  searchVideos();
});
</script>

<template>
  <div class="search-contents-videos-container">
    <div class="search-contents-videos-tab color">
      <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
        <el-radio-button v-for="tab in tabs" :key="tab.type" :label="tab.label">
          <span @click="handleTabClick(tab.type)">
            {{ tab.label }}
          </span>
        </el-radio-button>
      </el-radio-group>
    </div>
    <div class="search-contents-videos">
      <div
        class="search-contents-videos-item"
        v-for="video in videos"
        :key="video.id"
      >
        <div class="search-contents-videos-item-detail">
          <div
            class="search-contents-videos-img"
            @click="jumpToVideoDetail(video.id)"
          >
            <img :src="video.coverUrl" class="image" alt="" />
          </div>
          <div class="search-contents-videos-info">
            <div
              class="search-contents-videos-info-title"
              @click="jumpToVideoDetail(video.id)"
            >
              <span>{{ video.title }}</span>
            </div>
            <div class="search-contents-videos-info-count">
              <span>
                <img src="@/assets/icons/viewCount.png" alt="" />
                {{ video.play ? video.play : "-" }}
              </span>
              <span>
                <img src="@/assets/icons/danmuCount.png" alt="" />
                {{ video.comment ? video.comment : "-" }}
              </span>
              <span>
                {{ video.createDate }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-list-videos">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        v-model:current-page="pageNum"
        @current-change="searchVideos"
        :total="totalVideoCount"
      />
    </div>
  </div>
</template>

<style scoped lang="less">
.search-contents-videos-container {
  display: flex;
  flex-direction: column;
  align-content: center;
  .search-contents-videos-tab {
    margin-top: 30px;
    ::v-deep .el-radio-button__inner {
      border: none;
    }
  }
  .search-contents-videos {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(4, 1fr);
    height: 100%;
    .search-contents-videos-item {
      margin-top: 20px;

      .search-contents-videos-item-detail {
        display: flex;
        flex-direction: column;

        .search-contents-videos-img {
          cursor: pointer;
          img {
            max-height: 200px;
            max-width: 300px;
          }
        }
        .search-contents-videos-info {
          margin-top: 10px;
          .search-contents-videos-info-title {
            cursor: pointer;
            font-size: 18px;
            margin-bottom: 5px;
          }
          .search-contents-videos-info-count {
            display: flex;
            align-items: center;
            span {
              display: flex;
              align-items: center;
              margin-right: 20px;
              font-size: 14px;
              img {
                height: 25px;
                width: 25px;
                border-radius: 2px;
                margin-right: 5px;
              }
            }
          }
        }
      }
    }
  }
  .page-list-videos {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
